<template>
    <div class="container">
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="全部" name="全部">
                <div class="title">
                    <div class="flex between">
                        <h3>订单管理</h3>
                        <el-button v-if="!added" @click="$router.push({ path: '/order/add' })" type="primary">新增订单</el-button>
                    </div>
                </div>
                <div style="font-size: 12px">
                    <el-date-picker
                        v-model="time"
                        value-format="yyyy-MM-dd"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                    >
                    </el-date-picker>
                    <el-button style="margin-left: 20px" type="primary" @click="search">查询</el-button>
                </div>
                <el-row style="margin: 10px 0; text-align: center; font-size: 8px" class="containers">
                    <el-col :span="8">订单详情</el-col>
                    <el-col :span="4">收获信息</el-col>
                    <el-col :span="4">收款情况</el-col>
                    <el-col :span="4">物流状态</el-col>
                    <el-col :span="4">操作</el-col>
                </el-row>
                <el-row style="margin: 10px 0; text-align: center" class="table" v-for="(item, index) in tableData" :key="index">
                    <div
                        style="
                            text-align: left;
                            padding: 10px;
                            border-bottom: 1px solid lightgray;
                            background-color: rgba(239, 239, 239, 1);
                            font-size: 8px;
                        "
                    >
                        <span>下单时间：{{ item.createtime }}</span
                        ><span style="margin-left: 50px">订单号：{{ item.orderCode }}</span
                        ><span style="margin-left: 50px">订单来源：{{ item.source }}</span>
                    </div>
                    <el-col
                        class="flex column height"
                        :span="8"
                        style="border-right: 1px solid lightgray; justify-content: center; font-size: 8px"
                    >
                        <el-row type="flex" justify="space-between" style="" v-for="(s, zindex) in item.orderDetailedList" :key="zindex">
                            <el-col style="min-height: 30px" :span="8">{{ s.name }}</el-col>
                            <el-col style="" :span="8">{{ s.specs }}</el-col>
                            <el-col style="" :span="8">{{ s.number }}{{ s.unit }}</el-col>
                        </el-row>
                    </el-col>
                    <el-col class="flex center column height" :span="4" style="border-right: 1px solid lightgray; font-size: 8px">
                        <div>{{ item.clientName }}</div>
                        <div>收获地址：{{ item.address }}</div>
                        <div>收获人：{{ item.consignee }}</div>
                        <div>电话：{{ item.phone }}</div>
                    </el-col>
                    <el-col class="flex center column height" :span="4" style="border-right: 1px solid lightgray; font-size: 8px">
                        <div>金额：￥{{ item.totalAmount }}</div>
                        <div v-if="item.payStatus == '未付款'">{{ item.payStatus }}</div>
                        <div v-else-if="item.payStatus == '' || item.payStatus == null"></div>
                        <div v-else>{{ item.payStatus }}：￥{{ item.payAmount }}</div>
                        <div>支付方式：{{ item.payType }}</div>
                    </el-col>
                    <el-col class="flex center column height" :span="4" style="border-right: 1px solid lightgray">
                        <div v-if="item.state == 1 || item.state == 2">未发货</div>
                        <div v-else>已发货</div>
                    </el-col>
                    <el-col class="flex center column height" :span="4" style="">
                        <el-button v-if="!details" type="text" @click="handleDetail(item)">订单详情</el-button>
                        <el-button v-if="!modify" type="text" @click="handleEdit(item)">修改</el-button>
                        <el-button v-if="!deletes" type="text" @click="handleDelete(item)">删除</el-button>
                        <el-button v-if="!addcollection" type="text" @click="addCollectionRecord(item)">添加收款记录</el-button>
                    </el-col>
                </el-row>
                <el-pagination
                    layout="total, prev, pager, next, jumper"
                    :page-size="pagesize"
                    :current-page.sync="currentPage"
                    :total="total"
                    @current-change="handleCurrentChange"
                    style="margin-top: 20px"
                ></el-pagination>

                <!-- 弹出选择 -->
                <el-dialog title="请填写收款信息" :visible.sync="dialogVisible">
                    <el-form style="padding-left: 20px">
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="收款时间：">
                                    <el-date-picker
                                        v-model="receiveTime"
                                        type="date"
                                        value-format="yyyy-MM-dd"
                                        placeholder
                                        style="width: 300px"
                                    ></el-date-picker>
                                </el-form-item>
                                <el-form-item label="收款金额：">
                                    <el-input placeholder="请输入内容" v-model="payAmount" style="width: 200px"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="10">
                                <el-form-item label="付款方式：">
                                    <el-select v-model="payType" placeholder="请选择" style="width: 200px">
                                        <el-option :label="v" :value="v" v-for="(v, i) in ruleForm.paytypes" :key="i"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>

                    <div slot="footer" class="dialog-footer">
                        <el-button @click="close">取消</el-button>
                        <el-button type="primary" @click="update">确定</el-button>
                    </div>
                </el-dialog>
            </el-tab-pane>

            <el-tab-pane label="待付款" name="待付款">
                <div class="title">
                    <div class="flex between">
                        <h3>订单管理</h3>
                        <el-button v-if="!added" type="primary">新增订单</el-button>
                    </div>
                </div>
                <div>
                    <el-date-picker
                        v-model="time"
                        value-format="yyyy-MM-dd"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                    >
                    </el-date-picker>
                    <el-button style="margin-left: 20px" type="primary">查询</el-button>
                </div>
                <el-row style="margin: 10px 0; text-align: center" class="containers">
                    <el-col :span="8">订单详情</el-col>
                    <el-col :span="4">收获信息</el-col>
                    <el-col :span="4">收款情况</el-col>
                    <el-col :span="4">物流状态</el-col>
                    <el-col :span="4">操作</el-col>
                </el-row>
                <el-row style="margin: 10px 0; text-align: center" class="table" v-for="(item, index) in tableData" :key="index">
                    <div
                        style="
                            text-align: left;
                            padding: 10px;
                            border-bottom: 1px solid lightgray;
                            background-color: rgba(239, 239, 239, 1);
                        "
                    >
                        <span>下单时间：{{ item.createtime }}</span
                        ><span style="margin-left: 50px">订单号：{{ item.orderCode }}</span
                        ><span style="margin-left: 50px">订单来源：{{ item.source }}</span>
                    </div>
                    <el-col class="flex column height" :span="8" style="border-right: 1px solid lightgray; justify-content: center">
                        <el-row type="flex" justify="space-between" style="" v-for="(s, zindex) in item.orderDetailedList" :key="zindex">
                            <el-col style="min-height: 30px" :span="8">{{ s.name }}</el-col>
                            <el-col style="" :span="8">{{ s.specs }}</el-col>
                            <el-col style="" :span="8">{{ s.number }}{{ s.unit }}</el-col>
                        </el-row>
                    </el-col>
                    <el-col class="flex center column height" :span="4" style="border-right: 1px solid lightgray">
                        <div>{{ item.clientName }}</div>
                        <div>收获地址：{{ item.address }}</div>
                        <div>收获人：{{ item.consignee }}</div>
                        <div>电话：{{ item.phone }}</div>
                    </el-col>
                    <el-col class="flex center column height" :span="4" style="border-right: 1px solid lightgray">
                        <div>金额：￥{{ item.totalAmount }}</div>

                        <div v-if="item.payStatus == '未付款'">{{ item.payStatus }}</div>
                        <div v-else-if="item.payStatus == '' || item.payStatus == null"></div>
                        <div v-else>{{ item.payStatus }}：￥{{ item.payAmount }}</div>
                        <div>支付方式：{{ item.payType }}</div>
                    </el-col>
                    <el-col class="flex center column height" :span="4" style="border-right: 1px solid lightgray">
                        <div v-if="item.state == 1 || item.state == 2">未发货</div>
                        <div v-else>已发货</div>
                    </el-col>
                    <el-col class="flex center column height" :span="4" style="">
                        <el-button type="text" v-if="!details" @click="handleDetail(item)">订单详情</el-button>
                        <el-button type="text" v-if="!modify" @click="handleEdit(item)">修改</el-button>
                        <el-button type="text" v-if="!deletes" @click="handleDelete(item)">删除</el-button>
                        <el-button type="text" v-if="!addcollection" @click="addCollectionRecord(item)">添加收款记录</el-button>
                    </el-col>
                </el-row>
                <el-pagination
                    layout="total, prev, pager, next, jumper"
                    :page-size="pagesize"
                    :current-page.sync="currentPage"
                    :total="total"
                    @current-change="handleCurrentChange"
                    style="margin-top: 20px"
                ></el-pagination>
            </el-tab-pane>

            <el-tab-pane label="未发货" name="未发货">
                <div class="title">
                    <div class="flex between">
                        <h3>订单管理</h3>
                        <el-button v-if="!added" type="primary">新增订单</el-button>
                    </div>
                </div>
                <div>
                    <el-date-picker
                        v-model="time"
                        value-format="yyyy-MM-dd"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                    >
                    </el-date-picker>
                    <el-button style="margin-left: 20px" type="primary">查询</el-button>
                </div>
                <el-row style="margin: 10px 0; text-align: center" class="containers">
                    <el-col :span="8">订单详情</el-col>
                    <el-col :span="4">收获信息</el-col>
                    <el-col :span="4">收款情况</el-col>
                    <el-col :span="4">物流状态</el-col>
                    <el-col :span="4">操作</el-col>
                </el-row>
                <el-row style="margin: 10px 0; text-align: center" class="table" v-for="(item, index) in tableData" :key="index">
                    <div
                        style="
                            text-align: left;
                            padding: 10px;
                            border-bottom: 1px solid lightgray;
                            background-color: rgba(239, 239, 239, 1);
                        "
                    >
                        <span>下单时间：{{ item.createtime }}</span
                        ><span style="margin-left: 50px">订单号：{{ item.orderCode }}</span
                        ><span style="margin-left: 50px">订单来源：{{ item.source }}</span>
                    </div>
                    <el-col class="flex column height" :span="8" style="border-right: 1px solid lightgray; justify-content: center">
                        <el-row type="flex" justify="space-between" style="" v-for="(s, zindex) in item.orderDetailedList" :key="zindex">
                            <el-col style="min-height: 30px" :span="8">{{ s.name }}</el-col>
                            <el-col style="" :span="8">{{ s.specs }}</el-col>
                            <el-col style="" :span="8">{{ s.number }}{{ s.unit }}</el-col>
                        </el-row>
                    </el-col>
                    <el-col class="flex center column height" :span="4" style="border-right: 1px solid lightgray">
                        <div>{{ item.clientName }}</div>
                        <div>收获地址：{{ item.address }}</div>
                        <div>收获人：{{ item.consignee }}</div>
                        <div>电话：{{ item.phone }}</div>
                    </el-col>
                    <el-col class="flex center column height" :span="4" style="border-right: 1px solid lightgray">
                        <div>金额：￥{{ item.totalAmount }}</div>
                        <div v-if="item.payStatus == '未付款'">{{ item.payStatus }}</div>
                        <div v-else-if="item.payStatus == '' || item.payStatus == null"></div>
                        <div v-else>{{ item.payStatus }}：￥{{ item.payAmount }}</div>
                        <div>支付方式：{{ item.payType }}</div>
                    </el-col>
                    <el-col class="flex center column height" :span="4" style="border-right: 1px solid lightgray">
                        <div v-if="item.state == 1 || item.state == 2">未发货</div>
                        <div v-else>已发货</div>
                    </el-col>
                    <el-col class="flex center column height" :span="4" style="">
                        <el-button type="text" v-if="!details" @click="handleDetail(item)">订单详情</el-button>
                        <el-button type="text" v-if="!modify" @click="handleEdit(item)">修改</el-button>
                        <el-button type="text" v-if="!deletes" @click="handleDelete(item)">删除</el-button>
                        <el-button type="text" v-if="!addcollection" @click="addCollectionRecord(item)">添加收款记录</el-button>
                    </el-col>
                </el-row>
                <el-pagination
                    layout="total, prev, pager, next, jumper"
                    :page-size="pagesize"
                    :current-page.sync="currentPage"
                    :total="total"
                    @current-change="handleCurrentChange"
                    style="margin-top: 20px"
                ></el-pagination>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
import { order_findByList, order_delete, order_update } from '@/request/api';
export default {
    data() {
        return {
            time: '',
            payType: '',
            payAmount: '',
            receiveTime: '',
            activeName: '全部',
            tableData: [],
            queryForm: {
                time: '',
                page: 1
            },
            pagesize: 10,
            total: 10,
            currentPage: 1,
            dialogVisible: false,
            ruleForm: {
                paytype: '',
                paytypes: ['现金', '银行转账', '微信', '支付宝']
            },
            collectionRecord: {},
            state: '',
            start: '',
            end: '',
            added: true,
            details: true,
            modify: true,
            deletes: true,
            addcollection: true
        };
    },
    created() {},
    mounted() {
        this.init();
        this.judgmentAuthority();
    },
    methods: {
        search() {
            this.start = this.time[0];
            this.end = this.time[1];
            this.currentPage = 1;
            this.init();
        },
        close() {
            this.dialogVisible = false;
            this.payAmount = '';
            this.payType = '';
            this.receiveTime = '';
        },
        addCollectionRecord(ele) {
            this.dialogVisible = true;
            this.collectionRecord = ele;
        },
        // 添加收款记录
        update() {
            this.collectionRecord.payType = this.payType;
            this.collectionRecord.payAmount = this.payAmount;
            this.collectionRecord.receiveTime = this.receiveTime;
            order_update(this.collectionRecord).then((res) => {
                this.$notify({
                    title: '提示',
                    message: '操作成功',
                    type: 'success'
                });
                this.init();
                this.payType = '';
                this.payAmount = '';
                this.receiveTime = '';
            });
        },

        // 删除
        handleDelete(ele) {
            this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                order_delete(ele.id).then((res) => {
                    this.$notify({
                        title: '操作成功',
                        message: '删除成功',
                        type: 'success'
                    });
                    this.init();
                });
            });
        },
        init() {
            let data = {
                page: this.currentPage,
                state: this.state,
                start: this.start,
                end: this.end
            };
            order_findByList(data).then((res) => {
                this.tableData = res.rows;
                this.total = res.total;
            });
        },
        handleDetail(ele) {
            this.$router.push({
                path: '/order/add',
                query: { id: ele.id, type: 'detail' }
            });
        },
        handleEdit(ele) {
            this.$router.push({
                path: '/order/add',
                query: { id: ele.id, type: 'edit' }
            });
        },
        handleClick(val) {
            this.currentPage = 1;
            this.start = '';
            this.end = '';
            this.time = '';
            if (this.activeName == '待付款') {
                this.state = 1;
            }
            if (this.activeName == '未发货') {
                this.state = 2;
            }
            if (this.activeName == '全部') {
                this.state = '';
            }
            this.init();
            // console.log(val)
        },
        // getTime(){
        //   console.log(this.queryForm.time);
        // },
        handleCurrentChange() {},
        //判定操作按钮显示
        judgmentAuthority() {
            var type = JSON.parse(localStorage.getItem('userInfo')).appMenus;
            type.map((item) => {
                if (item.appName == '种植平台') {
                    item.menus.map((item1) => {
                        if (item1.name == '订单管理' && item1.children != null) {
                            for (var i = 0; i < item1.children.length; i++) {
                                if (item1.children[i].name == '新增') this.added = false;
                                if (item1.children[i].name == '订单详情') this.details = false;
                                if (item1.children[i].name == '修改') this.modify = false;
                                if (item1.children[i].name == '删除') this.deletes = false;
                                if (item1.children[i].name == '添加收款记录') this.addcollection = false;
                            }
                        }
                    });
                }
            });
        }
    }
};
</script>
<style scoped>
.height {
    min-height: 140px;
}
.el-pagination {
    text-align: center;
}
.flex {
    display: flex;
}
.column {
    flex-direction: column;
}
.center {
    justify-content: center;
    align-items: center;
}
.between {
    justify-content: space-between;
}
.around {
    justify-content: space-around;
}
.containers {
    padding: 15px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
}
.table {
    border: 1px solid #ddd;
    border-radius: 5px;
}
</style>